<template>
  <div class="cell-container">
    <div class="left-view">
      <van-radio
        v-if="inputType == 'RADIO'"
        icon-size="14px"
        shape="dot"
        checked-color="#436BFF"
        :disabled="disabled"
        :label-disabled="disabled"
        :checked="p_checked"
        @click.stop="
          () => {
            if (this.disable) return;
            this.p_checked = true;
          }
        "
      />

      <van-switch
        v-else-if="inputType == 'SWITCH'"
        class="switch"
        size="18"
        v-model="p_checked"
        :disabled="disable"
        @click.stop="toggleEvent"
      />
      <div class="title" :class="{ disableClass: disable }">{{ title }}</div>
    </div>

    <div class="right-view">
      <div v-show="value && value.length > 0" class="cell-value">
        {{ value }}
      </div>
      <van-icon
        name="arrow"
        size="10px"
        color="#262626"
        v-show="isLink"
        class="link-icon"
      />
    </div>
  </div>
</template>

<script>
import { set } from "lodash";
const EnumInputTypeObj = {
  RADIO: "RADIO", // 单选框
  SWITCH: "SWITCH", //复选框
};

export default {
  name: "ShareInfoCell",
  emits: ["update:checked"],
  props: {
    title: String,
    isLink: Boolean,
    value: String,
    disable: {
      type: Boolean,
      default: false,
    },
    checked: {
      type: Boolean,
      required: true,
    },
    inputType: {
      type: String,
      required: true,
      default: "SWITCH",
      validate: function (value) {
        return [EnumInputTypeObj.RADIO, EnumInputTypeObj.SWITCH].includes(value);
      },
    },
  },
  data() {
    return {
      disableClass: "disableClass",
    };
  },

  methods: {
    toggleEvent(e) {

    },
  },

  computed: {
    p_checked: {
      set(v) {
        this.$emit("update:checked", v);
      },

      get() {
        return this.checked;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.cell-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  width: 100%;
  height: 46px;
  box-sizing: border-box;

  .left-input-box {
    margin-right: 4px;
  }

  .title {
    color: #262626;
    font-size: 14px;
    padding-left: 8px;
  }

  .left-view {
    display: flex;
    flex-direction: row;
    align-items: center;

    .disableClass {
      color: rgb(168, 163, 163);
    }
  }

  .right-view {
    height: 100%;
    width: 40px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;

    .link-icon {
      margin-left: 4px;
    }

    .cell-value {
      color: #8c8c8c;
      font-size: 14px;
    }
  }
}
</style>
